<template>
	<view style="display: flex;flex-direction: column;">
		<view>
			<image :src="buildInfo.thumb" class="baiyi1"></image>
		</view>

		<view class="head">
			<view class="horizontal">
				<view class="line"></view>
				<text class="regai">基本信息</text>
				<image src="../../static/icon/share_icon.png" style="height: 30rpx; width: 30rpx;margin-left: 500rpx;">
				</image>
			</view>
		</view>

		<view style="display: flex; flex-direction: row;margin-top: 20rpx;">
			<view style="color: #333;text-align: justify; margin-left: 40rpx;height: 34rpx;">地&emsp;&emsp;区</view>
			<text style="font-weight: 800; margin-left: 60rpx;">{{buildInfo.area.name}}</text>
		</view>
		<view style="display: flex; flex-direction: row;margin-top: 20rpx;">
			<view style="color: #333;text-align: justify; margin-left: 40rpx; height: 34rpx;">楼盘名称</view>
			<text style="font-weight: 800; margin-left: 60rpx;">{{buildInfo.name}}</text>
		</view>

		<view style="display: flex; flex-direction: row;margin-top: 20rpx;">
			<view style="color: #333;text-align: justify; margin-left: 40rpx;height: 34rpx;">户&emsp;&emsp;型</view>
			<text style="font-weight: 800; margin-left: 60rpx;">{{buildInfo.model.name}}</text>
		</view>

		<view class="head">
			<view class="horizontal">
				<view class="line"></view>
				<text class="regai">地理位置</text>
				<image src="../../static/icon/share_icon.png" style="height: 30rpx; width: 30rpx;margin-left: 500rpx;">
				</image>
			</view>
		</view>

		<view>
			<map @click="gotoBigmap()" class="map" :latitude="buildInfo.latitude" :longitude="buildInfo.longitude"
				:markers="covers" :show-location="true">
			</map>
		</view>

		<view class="head">
			<view class="horizontal">
				<view class="line"></view>
				<text class="regai">案例展示</text>
			</view>
		</view>

		<view style="display: flex;flex-direction: row;">
			<view style="display: flex; flex-direction: column;" @click="openSimple">
				<image src="../../static/common/9.png" mode="widthFix"
					style="width: 324rpx; height: 200rpx;margin-left: 40rpx;margin-top: 20rpx;"></image>
				<view class="mark">
					<view class="linerow"></view>
					<text style="margin-left: 10rpx;">30m²</text>
					<view class="linerow2"></view>
				</view>
			</view>
			<view style="display: flex; flex-direction: column;" @click="openSimple">
				<image src="../../static/common/10.png" mode="widthFix"
					style="width: 324rpx; height: 200rpx;margin-left: 40rpx;margin-top: 20rpx;"></image>
				<view class="mark">
					<view class="linerow"></view>
					<text style="margin-left: 10rpx;">30m²</text>
					<view class="linerow2"></view>
				</view>
			</view>
		</view>

		<view style="display: flex;flex-direction: row;" @click="openSimple">
			<view style="display: flex; flex-direction: column;">
				<image src="../../static/common/9.png" mode="widthFix"
					style="width: 324rpx; height: 200rpx;margin-left: 40rpx;margin-top: 20rpx;"></image>
				<view class="mark">
					<view class="linerow"></view>
					<text style="margin-left: 10rpx;">30m²</text>
					<view class="linerow2"></view>
				</view>
			</view>
			<view style="display: flex; flex-direction: column;" @click="openSimple">
				<image src="../../static/common/10.png" mode="widthFix"
					style="width: 324rpx; height: 200rpx;margin-left: 40rpx;margin-top: 20rpx;"></image>
				<view class="mark">
					<view class="linerow"></view>
					<text style="margin-left: 10rpx;">30m²</text>
					<view class="linerow2"></view>
				</view>
			</view>
		</view>

		<view>
			<button class="button-style">
				<text style="color: white;">确定预约</text>
			</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				title: 'map',
				"longitude": "112.934522",
				"latitude": "28.283684",
				covers: [{
					"longitude": "112.934522",
					"latitude": "28.283684",
					"iconPath": "../../static/icon/markers.png"
				}],
				buildInfo: []
			}
		},
		methods: {
			openSimple(){
				uni.navigateTo({
					url:'/pages/details2/details2'
				})
			},
			gotoBigmap() {
				uni.openLocation({
					latitude: parseFloat(this.buildInfo.latitude),
					longitude: parseFloat(this.buildInfo.longitude),
					name: this.buildInfo.name,
					success: function() {
						console.log("导航成功");
					},
					fail: function(error) {
						console.log("导航失败");
					}
				})
			}
		},
		onLoad() {
			uni.request({
				url: 'https://baiyi.kent.work/api/v1/system/getBuildDetail',
				method: 'post',
				data: {
					"id": 40, //热改楼盘编号 
				},
				success: res => {
					console.log(res);
					this.buildInfo = res.data.data.buildInfo;
					this.covers = [{
						"latitude": this.buildInfo.latitude,
						"longitude": this.buildInfo.longitude,
						"width": 30,
						"height": 30,
						"iconPath": "../../static/icon/markers.png"
					}]
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
</script>

<style>
	.baiyi1 {
		height: 450rpx;
		width: 750rpx;
	}

	.horizontal {
		align-items: center;
		display: flex;
	}

	.regai {
		margin-left: 20rpx;
		font-weight: 800;
		font-style: normal;
	}

	.head {
		margin-top: 20rpx;
		display: flex;
	}

	.line {
		display: inline-block; //取消单独占一行
		height: 28rpx;
		width: 6rpx;
		background-color: green;
		margin-left: 60rpx;
	}

	.map {
		width: 670rpx;
		height: 406rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
	}

	.linerow {
		display: inline-block;
		height: 3rpx;
		width: 28rpx;
		background-color: green;
		margin-left: 100rpx;
	}

	.linerow2 {
		display: inline-block;
		height: 3rpx;
		width: 28rpx;
		background-color: green;
		margin-left: 10rpx;
	}

	.mark {
		width: 324rpx;
		height: 50rpx;
		display: flex;
		flex-direction: row;
		background-color: white;
		align-items: center;
		margin-left: 40rpx;
		border-bottom-right-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.5);
	}

	.button-style {
		background-color: green;
		width: 328rpx;
		height: 80rpx;
		margin-top: 60rpx;
		line-height: 80rpx;
		margin-bottom: 58rpx;
	}
</style>